@font-face {
  font-family : 'Anybody';
  src         : url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');
  font-display: block;
  font-style  : normal italic;
  font-weight : 100 900;
  font-stretch: 10% 400%;
}

.wrapper {
  width                : 100%;
  height               : 700px;
  display              : grid;
  grid-template-columns: 1fr 1fr;
  font-size            : 32px;
  color                : #fff;

  .desc {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    width          : 100%;
    height         : 100%;

    ol {
      li {
        font-size     : 24px;
        text-transform: lowercase;
      }
    }

    p {
      font-size : 32px;
      text-align: left;
    }

  }

  .container {
    position       : relative;
    margin         : auto;
    display        : flex;
    transform-style: preserve-3d;
    perspective    : 200px;
    font-family    : 'Anybody';

    ul {
      background     : radial-gradient(farthest-side at 110px 0px, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%);
      padding        : 5px;
      transform-style: preserve-3d;
      transform      : translateZ(-60px) rotateX(30deg) translateY(-30px);
      animation      : move 3s infinite alternate;

      &::before {
        content         : "";
        position        : absolute;
        left            : 0;
        bottom          : 0;
        right           : 0;
        height          : 45px;
        background      : rgba(255, 255, 255, 0.4);
        z-index         : 10;
        transform       : rotateX(-230deg);
        transform-origin: 50% 100%;
      }
    }

    li {
      width                  : 550px;
      font-variation-settings: 'wdth'85, 'wght'100;
      animation              : change 0.8s infinite linear alternate;
    }

    @for $i from 1 to 9 {
      li:nth-child(#{$i}) {
        animation-delay: #{($i - 1) * -0.125}s;
      }
    }

    @keyframes change {
      0% {
        font-variation-settings: 'wdth'60, 'wght'100;
        opacity                : .5;
      }

      100% {
        font-variation-settings: 'wdth'600, 'wght'900;
        opacity                : 1;
      }
    }

    @keyframes move {
      100% {
        transform: translateZ(-60px) rotateX(30deg) translateY(0px);
      }
    }
  }
}